<template>
  <div class="wrap">
    <div class="bind-wrap">
      <p class="tips">请绑定您的账号</p>
      <div class="form-wrap">
        <div class="form-box">
          <div class="input-group">
            <div class="input-box">
              <input
                type="text"
                placeholder="请输入手机号"
                maxlength="11"
                class="input"
                v-model="phoneNumber"
                ref="regPhone"
              >
            </div>
            <div class="input-box vcode-box" v-show="vcodeShow">
              <input
                type="text"
                class="input"
                placeholder="验证码"
                v-model="imgVcodeCon"
                ref="regImgVcode"
                maxlength="4"
              >
              <div class="vcode-img" @click="changeImgVcode">
                模拟验证码：{{this.imgVcode}}
              </div>
            </div>
            <div class="input-box" v-show="vcodeShow">
              <input
                type="text"
                class="input"
                placeholder="手机验证码"
                maxlength="4"
                v-model="phoneVcodeCon"
                ref="regPhoneVcode"
              >
              <button
                class="send-vcode-btn"
                @click="getPhoneVcode"
                v-html="this.getPhoneVcodeCon"
                :class="{action: getPhoneVcodeBtnCss}"
              >
              </button>
            </div>
          </div>
          <button class="submit" @click="login">登录</button>
        </div>
      </div>
    </div>
    <div ref="error"></div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      phoneNumber: '', // 注册手机号码
      imgVcodeCon: '', // 注册图形验证码
      phoneVcodeCon: '', // 注册手机验证码
      getPhoneVcodeBtnCss: false, // 控制获取手机验证码按钮的外观以及是否可点击
      getPhoneVcodeCon: '获取验证码', // 控制获取手机验证码按钮的内容
      imgVcode: '', // 客户端模拟图片验证码
      vcodeShow: false, // 控制验证码输入框的显示
      phoneVcode: '' // 客户端模拟手机验证码
    }
  },
  methods: {
    changeImgVcode () { // 改变图形验证码
      this.imgVcode = Math.floor(Math.random() * 9000 + 1000)
    },
    getPhoneVcode () {
      if (this.getPhoneVcodeBtnCss) return
      let _this = this
      this.$refs.regPhoneVcode.focus()
      this.phoneVcodeCon = ''
      let pathPhone = /^1[34578]\d{9}$/
      if (!pathPhone.test(this.phoneNumber)) {
        this.common.showRegError('手机号码格式有误', _this)
        this.$refs.regPhone.focus()
        this.phoneNumber = ''
        return false
      }
      let phoneVcode = Math.floor(Math.random() * 9000 + 1000)
      this.phoneVcode = phoneVcode
      if (parseInt(this.imgVcodeCon) !== this.imgVcode) {
        this.common.showRegError('图形验证码填写错误', _this)
        this.$refs.regImgVcode.focus()
        this.imgVcodeCon = ''
      } else {
        this.common.showRegError('本次模拟手机验证码为：' + phoneVcode, _this, true)
        this.$options.methods.changeImgVcode.apply(this)
        this.getPhoneVcodeBtnCss = true
        let time = 5
        this.getPhoneVcodeCon = time + ' 秒后重试'
        let timer = setInterval(() => {
          time--
          this.getPhoneVcodeCon = time + ' 秒后重试'
          if (time <= 0) {
            this.getPhoneVcodeCon = '获取验证码'
            this.getPhoneVcodeBtnCss = false
            clearInterval(timer)
          }
        }, 1000)
      }
    },
    showRegError (data, _this, cssName = false) { // 显示错误提示框
      clearTimeout(_this.errorTimeOut)
      _this.stateSucc = cssName// 控制显示框样式
      _this.state = true
      _this.errorText = data
      _this.errorTimeOut = setTimeout(() => {
        _this.state = false
      }, 3000)
    },
    login () {
      /** 验证手机号 */
      let _this = this
      let pathPhone = /^1[34578]\d{9}$/
      if (!pathPhone.test(this.phoneNumber)) {
        this.common.showRegError('手机号码格式有误', _this)
        this.$refs.regPhone.focus()
        this.phoneNumber = ''
        return false
      }
      /** 验证手机验证码 */
      if (!parseInt(this.phoneVcodeCon) || parseInt(this.phoneVcodeCon) !== this.phoneVcode) {
        this.common.showRegError('手机验证码输入不正确', _this)
        this.$refs.regPhoneVcode.focus()
        this.phoneVcodeCon = ''
        return false
      }
      /** 发送绑定QQ的请求 */
      this.$ajax({
        method: 'post',
        url: '/web/php/bind_QQ.php',
        data: this.$qs.stringify({
          phoneNumber: this.phoneNumber
        })
      }).then((result) => {
        let data = result.data
        if (data.returnCode === 10020) {
          this.$store.dispatch('changeState', {
            name: 'changeLoginState',
            value: true
          })
          this.$router.push('/')
        } else if (data.returnCode === 10022) {
          this.common.showRegError('当前手机号码已绑定其他QQ账号', _this)
        } else if (data.returnCode === 10021) {
          this.common.showRegError('未检测到QQ登录信息，请重新登录', _this)
        }
      })
    },
    keyDown () {
      var key = window.event.keyCode
      if (key === 13) {
        this.$options.methods.login.apply(this)
      }
    }
  },
  watch: {
    phoneNumber () { // 监听注册框内手机号码，如果手机号码合法则展示验证码框
      if (/^1[34578]\d{9}$/.test(this.phoneNumber)) {
        this.vcodeShow = true
        this.phoneVcode = ''
        this.changeImgVcode()
      } else {
        this.vcodeShow = false
      }
    }
  },
  created () {
    if (this.$store.state.loginState) {
      this.$router.push('/')
    }
  },
  mounted () {
    /** 遗留bug 当用户在本页面点击顶部登录注册按钮之后，此键盘事件会失效 */
    this.$refs.regPhone.focus()
    document.onkeydown = this.$options.methods.keyDown.bind(this)
  },
  destroyed () {
    document.onkeydown = null
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.wrap
  position fixed
  top 1.2rem
  left 0
  right 0
  bottom 0
  display flex
  justify-content center
  .bind-wrap
    width 19.2rem
    max-width 100%
    background $theme-background
    margin .4rem auto
    padding 0 .2rem
    box-sizing border-box
    .tips
      color $theme-color
      font-size .36rem
      text-align center
      line-height 1.69
      margin-top .8rem
    .form-wrap
      width 100%
      display flex
      justify-content center
      .form-box
        width 6.4rem
        max-width 100%
        padding .48rem
        box-sizing border-box
        background $theme-background
        position relative
        .input-group
          overflow hidden
          margin-bottom .12rem
          .input-box
            margin-bottom .2rem
            position relative
            &.vcode-box
              display flex
              justify-content center
              align-items center
              .input
                max-width 1.9rem
              .vcode-img
                width 3.2rem
                height 0.8rem
                background #68a7e7
                margin-left .3rem
                color #fff
                display flex
                justify-content center
                align-items center
                cursor pointer
                user-select none
            .send-vcode-btn
              color $theme-color
              position absolute
              right 0
              top 0
              background transparent
              padding 0 .32rem
              cursor pointer
              height 100%
              &.action
                color $theme-3-color
                cursor not-allowed
            .input
              border 1px solid #e9e9e9
              padding .2rem
              width 100%
              box-sizing border-box
              transition border-color .3s
              border-radius .04rem
              &:focus
                border-color #007fff
        .submit
          cursor pointer
          width 100%
          box-sizing border-box
          background $theme-color
          color #ffffff
          height .7rem
          border-radius .04rem
          &:hover
            background #0058b0
</style>
